import {NTabs, NTabPane, NSpace, NScrollbar, NButton, NCard, NTag, NTooltip, NModal} from "naive-ui"
import {ref} from "vue";
import {useBoolean,useXianLuStore,useUserInfoStore,useZhongzhiStore,useZhiqiStore,useZhiyaoStore,} from "#imports"
import Lingmu from "./components/Lingmu"
import Cangku from "./components/Cangku"
import Kuangdong from "./components/Kuangdong"
import Nongtian from "./components/Nongtian"
import Shangdian from "./components/Shangdian"
import TopInfo from "./components/TopInfo"


export default defineNuxtComponent({
    name: "修仙路",
    setup() {
        const store = useXianLuStore()
        const userStore = useUserInfoStore()
        const zhongzhiStore = useZhongzhiStore()
        const zhiqiStore = useZhiqiStore()
        const zhiyaoStore = useZhiyaoStore()

        // 仓库是否处于激活状态
        const [cangkuActicve, {toggle: toggleCangku}] = useBoolean(false)
        // 商店是否处于激活状态
        const [shangdianActicve, {toggle: toggleShangdian}] = useBoolean(false)
        // 当前激活的区域
        const activeArea = ref("农田")
        // 修改当前展示区域
        const changeArea = (area: string) => {
            activeArea.value = area
        }

        // 打开仓库弹窗
        const openCangku = () => {
            toggleCangku()
            if(shangdianActicve.value){
                toggleShangdian()
            }
        }
        // 打开商店弹窗
        const openShangdian = () => {
            toggleShangdian()
            if(cangkuActicve.value){
                toggleCangku()
            }
        }


        const init = ()=>{
            console.log("初始化--",userStore)
            userStore.initFunc()
            zhongzhiStore.initFunc()
            zhiqiStore.initFunc()
            zhiyaoStore.initFunc()
        }
        init()

        return () => <div class={"w-screen h-screen relative flex flex-col"}>
            <TopInfo />
            <NSpace class={"p-4px border-b border-l-none border-r-none border-t-none border-solid border-gray-200"}>
                <NButton type={activeArea.value === "农田" ? "success" : "default"}
                         onClick={() => changeArea("农田")}>农田</NButton>
                <NButton type={activeArea.value === "窝棚" ? "success" : "default"}
                         onClick={() => changeArea("窝棚")}>窝棚</NButton>
                <NButton type={activeArea.value === "矿洞" ? "success" : "default"}
                         onClick={() => changeArea("矿洞")}>矿洞</NButton>
                <NButton type={activeArea.value === "灵木" ? "success" : "default"}
                         onClick={() => changeArea("灵木")}>灵木</NButton>
                <NButton type={cangkuActicve.value ? "success" : "default"} onClick={openCangku}>仓库</NButton>
                <NButton type={shangdianActicve.value ? "success" : "default"} onClick={openShangdian}>商店</NButton>
            </NSpace>
            <div class={"w-full flex-1 relative"}>
                {activeArea.value === "农田" && <Nongtian/>}
                {activeArea.value === "灵木" && <Lingmu/>}
                {activeArea.value === "矿洞" && <Kuangdong/>}
            </div>
            
            {/* 仓库弹窗组件 */}
            <Cangku value={cangkuActicve.value} onUpdate:value={toggleCangku} />
            {/* 商店 */}
            <Shangdian value={shangdianActicve.value} onUpdate:value={(val) => shangdianActicve.value = val}/>
        </div>;
    },
});
